<!DOCTYPE html>
<html>

	<head lang="en">
		<title>首页</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
		<script src="/js/plugins/jquery/jquery.min.js"></script>
		<script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="/css/font/css/font-awesome.min.css" />
		<link rel="stylesheet" href="/css/reset.css" />
		<link rel="stylesheet" href="/css/strategyDetails.css" />
		<script src="/js/plugins/jrender/jrender.min.js"></script>
		<script src="/js/common.js"></script>
		<link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
		<script src="/js/plugins/dialog2/dialog.min.js"></script>

		<script>
            var count1;
			$(function () {
                var user = JSON.parse(sessionStorage.getItem("user"));




			    //获取参数
				var params = getParams();
				//判断参数中是否包含id信息
				if(params.id){
					$.get('/strategies/details/'+params.id,function (data) {
						$(".detail").renderValues(data);
                    });


                    //查询多少个人收藏
                    $.get("/myCollections/selectCollection",{'strategydetailId':params.id},function (data) {

                        $("#collectCount").html(data);
                        count1=data
                    })

					if (user){
						//查询当前用户是否有收藏当前游记
						$.ajax({
							async: false,
							url: "/myCollections",
							method:"get",
							data:{strategydetailId: params.id,
								userId:user.id
							},
							success:function (data) {
								if (data){
									$("#collectBtn").css("color","yellow");
									$("#collectBtn").removeClass("fa-star-o");
									$("#collectBtn").addClass("fa-star");
								} else {
									$("#collectBtn").css("color","rgb(33, 37, 41)");
								}
							}
						});
                    }
                    //收藏
                    $("#collectBtn").click(function () {
                        if (user){
							if ($("#collectBtn").css("color")=="rgb(33, 37, 41)") {
								//发送post,添加收藏
								$.post("/myCollections",{'strategydetail.id':params.id,'user.id':user.id},function (data) {
									if(data.success){
										count1 = count1+1;
										$("#collectBtn").css("color","yellow");
										$("#collectBtn").removeClass("fa-star-o");
										$("#collectBtn").addClass("fa-star");
										$("#collectCount").html(count1);
										$(document).dialog({
											type: 'notice',
											infoText: '收藏成功',
											autoClose: 300,
											position: 'center'  // center: 居中; bottom: 底部
										});
									}else{
										$(document).dialog({
											type: 'notice',
											infoText: '网络繁忙,请稍候',
											autoClose: 300,
											position: 'center'  // center: 居中; bottom: 底部
										});
									}
								});
							} else {
								//发送delete请求,取消收藏
								$.ajax({
									url:"/myCollections?strategydetailId="+params.id+"&userId="+user.id,
									method:"delete",
									success:function (data) {
										if (data.success){
											count1 = count1-1;
											$("#collectBtn").css("color","rgb(33, 37, 41)");
											$("#collectBtn").removeClass("fa-star");
											$("#collectBtn").addClass("fa-star-o");
											$("#collectCount").html(count1);
											$(document).dialog({
												type: 'notice',
												infoText: '取消收藏',
												autoClose: 300,
												position: 'center'  // center: 居中; bottom: 底部
											});
										} else{
											$(document).dialog({
												type: 'notice',
												infoText: '网络繁忙,请稍候',
												autoClose: 300,
												position: 'center'  // center: 居中; bottom: 底部
											});
										}
									}
								});
							}
                        }else{
                            window.location.href = 'login.html?authorId=3';
                        }
                    });
				}
            });
		</script>
	</head>

	<body>

	<div class=" nav-search">
		<a href="javascript:history.go(-1);">
			<span><i class="fa fa-chevron-left"></i></span>
		</a>
	</div>
	<hr>

	<div class="container detail">
		<h4 class="title"><strong render-html="title"></strong></h4>
		<img class="head-img" render-src="coverUrl">
		<div class="author">By <span ></span></div>
		<div class="content" render-html="strategyContent.content" >

		</div>
	</div>
	<div class="container d-flex">
		<div class="p-2  flex-fill">
			<i class="fa fa-thumbs-o-up" id="likeBtn" ></i>
		</div>
		<div class="p-2  flex-fill"><i class="fa  fa-commenting-o commentBtn" id="commentBtn"></i>
		</div>
		<div class="p-2  flex-fill"><i class="fa fa-star-o" id="collectBtn"> </i>
			<span id="collectCount"></span>
		</div>
	</div>

	</body>

</html>